<template>
    <div class="list">
        <div class="item" v-for="(item,index) in sx" :key="index">
            <div class="title">{{item.name}}</div>
            <div>商品价格:{{item.price}}</div>
            <div class="bottom">
                <div>商品描述:{{item.subscribe}}</div>
                <el-checkbox v-model="item.checked" v-if="active==0"/>
                <el-button v-else @click="$emit('state',item.id)">{{txt[active-1]}}</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:['active','goods'],
    data() {
        return {
            txt:['付款','发货','收货','再来一单']
        }
    },

    mounted() {

    },
    methods: {

    },
    computed:{
        sx(){
            if(this.active==0){
                return this.goods;
            }else{
                return this.goods.filter(item=>{
                    return item.state==this.active
                })
            }
        }
    }
};
</script>

<style lang='scss' scoped >
.list{
    width: 100%;
    padding-bottom: 15px;
    .item{
        width: 90%;
        background: #fff;
        margin: 15px auto;
        padding: 5px;
        border-radius: 5px;
        .title{
             font-size: 19px;
             overflow: hidden;
             width: 100%;
        }
        .bottom{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
}
</style>
